<template>
  <div class="projectAdd" v-loading="detailInfoShow">
    <!-- 筛选按钮 -->
    <div class="search-button" v-if="!contactAddShow && !saleAddShow">
      <el-button
        v-if="pageType === 'check' && route.name === 'ProjectCheck'"
        class="btn save"
        @click="handleCheckBtn(projectFormRef, 3, '同意')"
        ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
        >同意</el-button
      >
      <el-button
        v-if="pageType === 'check' && route.name === 'ProjectCheck'"
        class="btn withdraw"
        @click="handleCheckBtn(projectFormRef, 4, '拒绝')"
        ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
        >拒绝</el-button
      >

      <el-button
        v-if="pageType === 'check' && route.name === 'ProjectCheck'"
        class="btn withdraw"
        @click="handleCheckBtn(projectFormRef, 6, '驳回')"
        ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
        >驳回</el-button
      >
      <el-button
        v-if="pageType !== 'detail' && pageType !== 'check'"
        class="btn submit"
        @click="handleAddSave(projectFormRef, 1)"
        ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
        >提交</el-button
      >
      <el-button
        v-if="pageType == 'edit'"
        class="btn withdraw"
        @click="handleCheckBtn(projectFormRef, 5, '撤回')"
        ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
        >撤回</el-button
      >
      <el-button
        v-if="pageType !== 'detail' && route.name === 'Project'"
        class="btn save"
        @click="handleAddSave(projectFormRef, 0)"
        ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
        >保存</el-button
      >
      <el-button class="btn direction" @click="handleBack"
        ><el-icon class="icon" color="#fff"> <Back /> </el-icon
        >返回</el-button
      >
    </div>
    <el-tabs type="border-card">
      <el-tab-pane label="项目信息">
        <el-collapse v-model="activeNames">
          <!-- 基础信息 -->
          <el-collapse-item
            name="1"
            v-if="!contactAddShow && !saleAddShow"
            class="transform-down"
          >
            <template #title>
              <span class="circle"></span>
              <span class="collapse-title"
                >{{
                  pageType === "detail"
                    ? ""
                    : pageType === "add"
                    ? "新增"
                    : pageType === "edit"
                    ? "编辑"
                    : "审核"
                }}项目信息</span
              >
            </template>
            <div class="project-info">
              <el-form
                :model="projectForm"
                ref="projectFormRef"
                :rules="queryRules"
                label-width="100px"
                v-enterToNext
                :disabled="pageType === 'detail' || pageType === 'check'"
              >
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="项目编号：">
                      <el-input
                        v-model="projectForm.projectCode"
                        placeholder="自动生成"
                        clearable
                        class="search-input"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      label="项目名称："
                      prop="projectName"
                      label-width="120"
                    >
                      <el-input
                        ref="refInput"
                        v-model="projectForm.projectName"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      label="业务人员："
                      prop="userId"
                      label-width="148"
                    >
                      <el-select
                        v-model="projectForm.userId"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                      >
                        <el-option
                          v-for="dict in userList"
                          :key="dict.userId"
                          :label="dict.nickName"
                          :value="dict.userId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      label="项目状态："
                      prop="projectStatus"
                      label-width="120"
                    >
                      <el-select
                        v-model="projectForm.projectStatus"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                      >
                        <el-option
                          v-for="dict in statusList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="0">
                  <el-col :span="6">
                    <el-form-item label="项目类型：" prop="projectType">
                      <el-select
                        v-model="projectForm.projectType"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                      >
                        <el-option
                          v-for="dict in typeList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      label="项目起止时间："
                      prop="dateValue"
                      label-width="120"
                    >
                      <el-date-picker
                        v-model="projectForm.dateValue"
                        type="daterange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      label="项目种类："
                      prop="projectCategory"
                      label-width="148"
                    >
                      <el-select
                        v-model="projectForm.projectCategory"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                      >
                        <el-option
                          v-for="dict in kindList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      label="关联客户："
                      prop="customerId"
                      label-width="120"
                    >
                      <el-select
                        v-model="projectForm.customerId"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                      >
                        <el-option
                          v-for="dict in customerList"
                          :key="dict.customerId"
                          :label="dict.name"
                          :value="dict.customerId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="0">
                  <el-col :span="7">
                    <el-form-item label="项目地址：" prop="city">
                      <el-select
                        filterable
                        style="width: 93px"
                        v-model="projectForm.province"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                        @change="handleProvince('province')"
                      >
                        <el-option
                          v-for="dict in provinceList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                      <el-select
                        filterable
                        style="width: 93px; margin: 0 5px"
                        v-model="projectForm.city"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                        @change="handleProvince('city')"
                      >
                        <el-option
                          v-for="dict in cityList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                      <el-select
                        filterable
                        style="width: 93px"
                        v-model="projectForm.area"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                      >
                        <el-option
                          v-for="dict in areaList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item
                      label="详细地址："
                      prop="address"
                      label-width="100"
                    >
                      <el-input
                        style="width: 100%"
                        v-model="projectForm.address"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="projectForm.includeContract == 2">
                    <el-form-item
                      label="成交概率预估："
                      label-width="120"
                      prop="probability"
                    >
                      <el-input
                        type="Number"
                        v-model="projectForm.probability"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                        @input="
                          projectForm.probability =
                            projectForm.probability.replace(/^(0+)|[^\d]+/g, '')
                        "
                      >
                        <template #append>%</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="项目金额：" prop="money">
                      <el-input
                        type="Number"
                        v-model="projectForm.money"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      >
                        <template #append>万</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      label="是否签合同："
                      prop="includeContract"
                      label-width="120"
                    >
                      <el-select
                        v-model="projectForm.includeContract"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                      >
                        <el-option
                          v-for="dict in contractList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="projectForm.includeContract == 2">
                    <el-form-item
                      label="计划成交合同时间："
                      prop="planContractTime"
                      label-width="148"
                    >
                      <el-date-picker
                        v-model="projectForm.planContractTime"
                        format="YYYY/MM/DD"
                        class="search-input"
                        value-format="YYYY-MM-DD"
                        type="date"
                        placeholder="请选择"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      label="是否中标："
                      prop="successfulBidder"
                      label-width="120"
                    >
                      <el-select
                        v-model="projectForm.successfulBidder"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                      >
                        <el-option
                          v-for="dict in successfulList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item
                      label="施工地址："
                      prop="constructionAddress"
                      label-width="100"
                      v-if="projectForm.projectStatus == 3">
                      <el-input
                        style="width: 100%"
                        v-model="projectForm.constructionAddress"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      label="期望安装完成日期："
                      prop="installationCompletionTime"
                      label-width="148"
                      v-if="projectForm.projectStatus === 3"
                    >
                      <el-date-picker
                        v-model="projectForm.installationCompletionTime"
                        format="YYYY/MM/DD"
                        class="search-input"
                        value-format="YYYY-MM-DD"
                        type="date"
                        placeholder="请选择"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      v-if="projectForm.projectStatus === 3"
                      label="验收日期："
                      prop="checkTime"
                      label-width="120"
                    >
                      <el-date-picker
                        v-model="projectForm.checkTime"
                        format="YYYY/MM/DD"
                        class="search-input"
                        value-format="YYYY-MM-DD"
                        type="date"
                        placeholder="请选择"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="备注：" label-width="100">
                      <el-input
                      maxlength="2000"
                        style="width: 100%"
                        v-model="projectForm.remarks"
                        type="textarea"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-collapse-item>
          <!-- 基础信息 -->
          <el-collapse-item name="6" class="transform-down">
            <template #title>
              <span class="circle"></span>
              <span class="collapse-title">启动项目</span>
            </template>
            <div class="project-info">
              <el-form
                :model="startForm"
                ref="followFormRef"
                :rules="queryRules"
                label-width="130px"
                v-enterToNext
                :disabled="pageType === 'detail'"
              >
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="项目启动时间：">
                      <el-date-picker
                        value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="startForm.projectStartTime"
                        class="search-input"
                        type="datetime"
                        placeholder="请选择"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="项目结束时间：">
                      <el-date-picker
                        value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="startForm.projectEndTime"
                        class="search-input"
                        type="datetime"
                        placeholder="请选择"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="选择项目经理：">
                      <el-input
                        style="width: 100%"
                        v-model="startForm.pm"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-collapse-item>
          <!-- 添加销售清单 -->
          <el-collapse-item
            name="2"
            style="position: relative"
            v-if="saleAddShow && !contactAddShow"
            class="transform-up"
          >
            <template #title>
              <span class="circle"></span>
              <span class="collapse-title">添加销售清单</span>
            </template>
            <div class="project-info">
              <el-form
                :model="saleForm"
                ref="saleFormRef"
                :rules="querySaleRules"
                label-width="100px"
                v-enterToNext
              >
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="销售类目：" prop="saleCategory">
                      <el-select
                        ref="refSelect"
                        @change="handleSaleCategory"
                        v-model="saleForm.saleCategory"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                      >
                        <el-option
                          v-for="dict in saleCategoryList"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="saleForm.saleCategory === 0">
                    <el-form-item label="设备名称：" prop="materialId">
                      <el-select
                        v-model="saleForm.materialId"
                        placeholder="请选择"
                        clearable
                        class="search-input"
                        @change="handleDevice"
                      >
                        <el-option
                          v-for="dict in deviceList"
                          :key="dict.materialId"
                          :label="dict.saleName"
                          :value="dict.materialId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="saleForm.saleCategory === 0">
                    <el-form-item label="单位：">
                      <el-input
                        disabled
                        v-model="saleForm.materialUnitName"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="saleForm.saleCategory === 0">
                    <el-form-item label="技术参数：">
                      <el-input
                        disabled
                        v-model="saleForm.technologyParameter"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="saleForm.saleCategory === 0">
                    <el-form-item label="设备品牌：" prop="brand">
                      <el-input
                        v-model="saleForm.brand"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="saleForm.saleCategory === 0">
                    <el-form-item label="设备数量：" prop="quantity">
                      <el-input
                        v-model="saleForm.quantity"
                        placeholder="请输入"
                        clearable
                        type="Number"
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <!-- </el-row>
            <el-row> -->

                  <el-col :span="6" v-if="saleForm.saleCategory === 1">
                    <el-form-item label="平台名称：">
                      <el-input
                        v-model="saleForm.platformName"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="备注：">
                      <el-input
                      maxlength="2000"
                        style="width: 96.2%"
                        v-model="saleForm.remarks"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                        @keyup.enter.stop="handleSaleAdd(saleFormRef)"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-collapse-item>
          <!-- 销售清单明细 -->
          <el-collapse-item
            name="3"
            style="position: relative"
            v-show="!contactAddShow"
            class="transform-down"
          >
            <template #title>
              <span class="circle"></span>
              <span class="collapse-title">销售清单列表</span>
              <div
                v-if="pageType !== 'detail' && !saleAddShow"
                class="nofixed-search-button button-position"
              >
                <el-button class="btn add" @click.stop="handleSaleOperate"
                  ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                  >添加</el-button
                >
              </div>
              <div
                class="nofixed-search-button button-position"
                v-else
                v-if="pageType !== 'detail'"
              >
                <el-button
                  class="btn add"
                  @click.stop="handleSaleAdd(saleFormRef)"
                  ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                  >添加</el-button
                >
                <el-button class="btn direction" @click.stop="handleSaleBack"
                  ><el-icon class="icon" color="#fff"> <ArrowUp /> </el-icon
                  >关闭</el-button
                >
              </div>
            </template>
            <div class="contact-info">
              <!-- 表格数据 -->
              <el-table
                :data="projectForm.projectSaleInfoRespVos"
                border
                :height="
                  pageType === 'detail'
                    ? '100%'
                    : contactAddShow
                    ? '490px'
                    : '280px'
                "
                :header-cell-style="{ 'text-align': 'center' }"
              >
                <!-- 操作模式 -->
                <el-table-column
                  label="操作"
                  align="center"
                  :show-overflow-tooltip="true"
                  width="100px"
                  v-if="pageType !== 'detail'"
                >
                  <!-- v-if="!operateType" -->
                  <template #default="{ row, $index }">
                    <div class="table-operate">
                      <img
                        src="@/assets/icons/images/edit.png"
                        class="table-icon"
                        title="编辑"
                        @click="handleOperateSec('edit', row, $index)"
                      />
                      <img
                        src="@/assets/icons/images/delete.png"
                        class="table-icon"
                        title="删除"
                        @click="handleOperateSec('delete', row, $index)"
                      />
                    </div> </template
                ></el-table-column>
                <el-table-column
                  label="销售类目"
                  prop="saleCategoryName"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="设备品牌"
                  prop="brand"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="设备名称"
                  prop="saleName"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="设备数量"
                  prop="quantity"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="单位"
                  prop="materialUnitName"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="技术参数"
                  prop="technologyParameter"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="平台名称"
                  prop="platformName"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />

                <el-table-column
                  label="备注"
                  prop="remarks"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
              </el-table>
            </div>
          </el-collapse-item>
          <!-- 添加甲方施工联系人 -->
          <el-collapse-item
            name="4"
            style="position: relative"
            v-if="contactAddShow && !saleAddShow"
            class="transform-up"
          >
            <template #title>
              <span class="circle"></span>
              <span class="collapse-title">添加联系人</span>
            </template>
            <div class="project-info">
              <el-form
                :model="contactForm"
                ref="contactFormRef"
                :rules="queryContactRules"
                label-width="100px"
                v-enterToNext
              >
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="姓名：" prop="name">
                      <el-input
                        ref="contactRefInput"
                        v-model="contactForm.name"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="联系方式：" prop="phone">
                      <el-input
                        v-model="contactForm.phone"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="备注：">
                      <el-input
                      maxlength="2000"
                        style="width: 100%"
                        v-model="contactForm.remarks"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                        @keyup.enter.stop="handleContactAdd(contactFormRef)"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-collapse-item>
          <!-- 甲方施工联系人 -->
          <el-collapse-item
            name="5"
            style="position: relative;margin-top:20px;'"
            v-show="!saleAddShow"
          >
            <template #title>
              <span class="circle"></span>
              <span class="collapse-title">甲方施工联系人列表</span>
              <div
                v-if="pageType !== 'detail' && !contactAddShow"
                class="nofixed-search-button button-position"
              >
                <el-button class="btn add" @click.stop="handleContactOperate"
                  ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                  >添加</el-button
                >
              </div>
              <div
                class="nofixed-search-button button-position"
                v-else
                v-if="pageType !== 'detail'"
              >
                <el-button
                  class="btn add"
                  @click.stop="handleContactAdd(contactFormRef)"
                  ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                  >添加</el-button
                >
                <el-button class="btn direction" @click.stop="handleProjectBack"
                  ><el-icon class="icon" color="#fff"> <ArrowUp /> </el-icon
                  >关闭</el-button
                >
              </div>
            </template>
            <div class="contact-info">
              <!-- 表格数据 -->
              <el-table
                :data="projectForm.projectPracticeInfoRespVos"
                border
                :height="
                  pageType === 'detail'
                    ? '100%'
                    : contactAddShow
                    ? '490px'
                    : '280px'
                "
                :header-cell-style="{ 'text-align': 'center' }"
              >
                <!-- 操作模式 -->
                <el-table-column
                  label="操作"
                  align="center"
                  :show-overflow-tooltip="true"
                  width="100px"
                  v-if="pageType !== 'detail'"
                >
                  <!-- v-if="!operateType" -->
                  <template #default="{ row, $index }">
                    <div class="table-operate">
                      <img
                        src="@/assets/icons/images/edit.png"
                        class="table-icon"
                        title="编辑"
                        @click="handleOperate('edit', row, $index)"
                      />
                      <img
                        src="@/assets/icons/images/delete.png"
                        class="table-icon"
                        title="删除"
                        @click="handleOperate('delete', row, $index)"
                      />
                    </div> </template
                ></el-table-column>
                <el-table-column
                  label="姓名"
                  prop="name"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="联系方式"
                  prop="phone"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="备注"
                  prop="remarks"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>

      <el-tab-pane label="采购申请">
        <el-collapse v-model="activeNames">
          <!-- 销售清单明细 -->
          <el-collapse-item
            name="3"
            style="position: relative"
            v-show="!contactAddShow"
            class="transform-down"
          >
            <template #title>
              <span class="circle"></span>
              <span class="collapse-title">销售清单列表</span>
              <div
                v-if="pageType !== 'detail' && !saleAddShow"
                class="nofixed-search-button button-position"
              >
                <el-button class="btn add" @click.stop="handleSaleOperate"
                  ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                  >添加</el-button
                >
              </div>
              <div
                class="nofixed-search-button button-position"
                v-else
                v-if="pageType !== 'detail'"
              >
                <el-button
                  class="btn add"
                  @click.stop="handleSaleAdd(saleFormRef)"
                  ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                  >添加</el-button
                >
                <el-button class="btn direction" @click.stop="handleSaleBack"
                  ><el-icon class="icon" color="#fff"> <ArrowUp /> </el-icon
                  >关闭</el-button
                >
              </div>
            </template>
            <div class="contact-info">
              <!-- 表格数据 -->
              <el-table
                :data="projectForm.purchaseListRespVos"
                border
                :height="
                  pageType === 'detail'
                    ? '100%'
                    : contactAddShow
                    ? '490px'
                    : '280px'
                "
                :header-cell-style="{ 'text-align': 'center' }"
              >
                <!-- 操作模式 -->
                <el-table-column
                  label="操作"
                  align="center"
                  :show-overflow-tooltip="true"
                  width="60px"
                >
                  <!-- v-if="!operateType" -->
                  <template #default="{ row, $index }">
                    <div class="table-operate">
                      <img
                        src="@/assets/icons/images/detail.png"
                        class="table-icon"
                        title="查看详情"
                        @click="handlePurchase(row)"
                      />
                    </div> </template
                ></el-table-column>
                <el-table-column
                  label="请购编号"
                  prop="purchaseApplyCode"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="申请日期"
                  prop="applicantDate"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="申请人"
                  prop="applicantName"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="申请部门"
                  prop="deptName"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="采购类型"
                  prop="applicantTypeName"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="期望交付日期"
                  prop="deliveryDate"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="项目名称"
                  prop="projectName"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="项目状态"
                  prop="checkStatusName"
                  :show-overflow-tooltip="true"
                  min-width="140"
                />
                <el-table-column
                  label="申请事由"
                  prop="applicantReason"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
                <el-table-column
                  label="备注"
                  prop="remarks"
                  :show-overflow-tooltip="true"
                  min-width="160"
                />
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      v-model="dialogVisible"
      title="物料信息"
      width="80%"
      :close-on-click-modal="false"
    >
      <div style="height: 60vh">
        <!-- 表格数据 -->
        <el-table
          :data="purchaseInfo"
          border
          :height="'100%'"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            label="物料编号"
            prop="materialCode"
            :show-overflow-tooltip="true"
            min-width="160"
          />
          <el-table-column
            label="物料名称"
            prop="materialName"
            :show-overflow-tooltip="true"
            min-width="160"
          />
          <el-table-column
            label="出厂型号"
            prop="factoryCode"
            :show-overflow-tooltip="true"
            min-width="160"
          />
          <el-table-column
            label="技术参数"
            prop="technologyParameter"
            :show-overflow-tooltip="true"
            min-width="160"
          />
          <el-table-column
            label="单位"
            prop="materialUnitName"
            :show-overflow-tooltip="true"
            min-width="160"
          />
          <el-table-column
            label="请购数量"
            prop="purchaseNumber"
            :show-overflow-tooltip="true"
            min-width="160"
          />
          <el-table-column
            label="单价（元）"
            prop="purchasePrice"
            :show-overflow-tooltip="true"
            min-width="160"
          />
          <el-table-column
            label="总价（元）"
            prop="allPrice"
            :show-overflow-tooltip="true"
            min-width="160"
          >
            <!-- <template #default="{ row }">
                  {{ row.purchasePrice * row.purchaseNumber }}
                </template> -->
          </el-table-column>
          <el-table-column
            label="到货周期"
            prop="deliveryCycle"
            :show-overflow-tooltip="true"
            min-width="160"
          />
          <el-table-column
            label="物料图片"
            prop=""
            :show-overflow-tooltip="true"
            min-width="200"
          >
            <template #default="{ row }">
              <div v-if="row.suppFileInfoVos" class="image-content">
                <el-image
                  v-for="(item, index) in row.suppFileInfoVos"
                  :key="index"
                  :preview-teleported="true"
                  style="width: 50px; height: 50px; margin-right: 5px"
                  :src="item.url"
                  :preview-src-list="showImg(item.url)"
                >
                  <template #error>
                    <div class="image-slot">
                      <el-icon><icon-picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="参考链接"
            prop="referenceLink"
            :show-overflow-tooltip="true"
            min-width="160"
          />
          <el-table-column
            label="供应商"
            prop="supplierName"
            :show-overflow-tooltip="true"
            min-width="160"
          />
          <el-table-column
            label="生产厂商"
            prop="manufactureName"
            :show-overflow-tooltip="true"
            min-width="160"
          />
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { getProvinceApi, getCustomerAllListApi } from "@/api/information/customer";
import { getUserListApi } from "@/api/operation/work";
import {
  startProjecDetailApi,
  readyProjecDetailApi,
  purchaseDetailApi,
} from "@/api/operation/project";
import {
  addProjectApi,
  getProjectApi,
  editProjectApi,
  checkProjectApi,
} from "@/api/sales/project";
import { getMaterialListApi } from "@/api/information/material";
import { getDictsApi } from "@/api/dict";
import { ElMessage, ElMessageBox } from "element-plus";
const route = useRoute();
const emit = defineEmits([
  // 项目新增组件显隐
  "projectAddShow",
  // 更新项目新增组件显隐
  "update:projectAddShow",
  // 刷新父组件表格数据
  "refreshList",
  // 更新跟进组件显隐
  "updateFollowAddShow",
]);
const props = defineProps({
  // 操作类型
  pageType: {
    type: String,
    default: "add",
  },
});
// 折叠栏默认展开
const activeNames = ref(["1", "2", "3", "4", "5", "6"]);
// 客户表单引用
const projectFormRef = ref();
// 联系人表单引用
const contactFormRef = ref();
// 销售表单引用
const saleFormRef = ref();
// 联系人操作类型
const operateType = ref("");
// 详情加载效果
const detailInfoShow = ref(false);
// 联系人当前索引(编辑联系人使用)
const tableIndex = ref(null);
// 销售清单当前索引(编辑销售清单使用)
const tableIndexSec = ref(null);
// 输入框引用
const refInput = ref();
// 联系人输入框引用
const contactRefInput = ref();
// 下拉框引用
const refSelect = ref();
// 销售项目类目列表
const saleCategoryList = ref([]);
// 是否签合同列表
const contractList = ref([]);
// 是否中标列表
const successfulList = ref([]);
// 项目种类列表
const kindList = ref([]);
// 项目状态列表
const statusList = ref([]);
// 项目类型列表
const typeList = ref([]);
// 客户列表
const customerList = ref([]);
// 设备列表
const deviceList = ref([]);
// 新增联系人表单显隐
const contactAddShow = ref(false);
// 新增销售列表表单显隐
const saleAddShow = ref(false);
// 项目启动表单
const startForm = ref({});
// 采购明细列表
const purchaseInfo = ref([]);
// 弹框
const dialogVisible = ref(false);
//省市区校验规则
const provinceValidate = (rule, value, callback) => {
  const { province, city, area } = projectForm.value;
  if (!province || !city || !area) {
    callback(new Error("请选择省市区"));
  } else {
    callback();
  }
};
// 项目表单模板
const projectFormTemplate = {
  address: "",
  area: null,
  arrivalStatus: null,
  checkStatus: null,
  checkTime: "",
  city: null,
  constructionAddress: "",
  customerId: null,
  endTime: "",
  includeContract: null,
  installationCompletionTime: "",
  money: null,
  planContractTime: "",
  practiceStatus: null,
  probability: "",
  projectCategory: null,
  projectName: "",
  projectPracticeInfoRespVos: [],
  projectSaleInfoRespVos: [],
  projectStatus: null,
  projectType: null,
  province: null,
  remarks: "",
  startTime: "",
  userId: null,
  type: 0,
  successfulBidder: null,
  dateValue: [],
};
const data = reactive({
  // 项目表单
  projectForm: JSON.parse(JSON.stringify(projectFormTemplate)),
  // 联系人表单
  contactForm: {
    name: "",
    phone: "",
    practiceId: null,
    projectId: null,
    remarks: "",
  },
  // 销售清单表单
  saleForm: {
    brand: "",
    saleName: "",
    materialId: null,
    materialUnit: null,
    materialUnitName: "",
    platformName: "",
    technologyParameter: "",
    projectId: null,
    projectSaleId: null,
    quantity: null,
    remarks: "",
    saleCategory: null,
    saleCategoryName: "",
    saleName: "",
  },
  // 项目表单校验规则
  queryRules: {
    projectName: [
      { required: true, message: "请输入项目名称", trigger: "blur" },
    ],
    userId: [{ required: true, message: "请选择业务人员", trigger: "change" }],
    projectStatus: [
      { required: true, message: "请选择项目状态", trigger: "change" },
    ],
    projectType: [
      { required: true, message: "请选择项目类型", trigger: "change" },
    ],
    dateValue: [
      { required: true, message: "请选择项目起止时间", trigger: "change" },
    ],
    projectCategory: [
      { required: true, message: "请选择项目种类", trigger: "change" },
    ],
    customerId: [
      { required: true, message: "请选择关联客户", trigger: "change" },
    ],
    city: [
      {
        required: true,
        validator: provinceValidate,
        message: "请选择省市区",
        trigger: "change",
      },
    ],
    address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
    probability: [
      { required: true, message: "请输入成交概率预估", trigger: "blur" },
    ],
    money: [{ required: true, message: "请输入项目金额", trigger: "blur" }],
    includeContract: [
      { required: true, message: "请选择是否签合同", trigger: "change" },
    ],
    successfulBidder: [
      { required: true, message: "请选择是否中标", trigger: "change" },
    ],
    planContractTime: [
      { required: true, message: "请选择计划成交合同时间", trigger: "change" },
    ],
    checkTime: [
      { required: true, message: "请选择验收日期", trigger: "change" },
    ],
    constructionAddress: [
      { required: true, message: "请输入施工地址", trigger: "blur" },
    ],
    installationCompletionTime: [
      { required: true, message: "请选择期望安装完成日期", trigger: "change" },
    ],
  },
  // 联系人表单校验规则
  queryContactRules: {
    name: [
      { required: true, message: "请输入姓名", trigger: "blur" },
      { min: 1, max: 15, message: "最多可输入15字", trigger: "blur" },
    ],
    phone: [
      { required: true, message: "请输入联系方式", trigger: "blur" },
      { min: 1, max: 11, message: "最多可输入11字", trigger: "blur" },
    ],
  },
  // 销售清单表单校验规则
  querySaleRules: {
    saleCategory: [
      { required: true, message: "请选择销售类目", trigger: "change" },
    ],
    materialId: [
      { required: true, message: "请选择设备名称", trigger: "change" },
    ],
    quantity: [{ required: true, message: "请输入设备数量", trigger: "blur" }],
    brand: [{ required: true, message: "请输入设备品牌", trigger: "blur" }],
  },
  // 省列表
  provinceList: [],
  // 市列表
  cityList: [],
  // 区列表
  areaList: [],
  // 用户列表
  userList: [],
});
const {
  projectForm,
  contactForm,
  saleForm,
  queryRules,
  queryContactRules,
  querySaleRules,
  provinceList,
  cityList,
  areaList,
  userList,
} = toRefs(data);

/**
 * @description: 保存
 * @param {Object} customerFormRef 客户表单引用
 */
const handleAddSave = async (projectFormRef, type) => {
  // if (type && props.pageType === "edit") {
  //   return handleCheckBtn(projectFormRef, 1, "提交");
  // }
  if (!projectFormRef) return;
  await projectFormRef.validate(async (valid, fields) => {
    if (valid) {
      ElMessageBox.confirm("确定保存以上数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "confirmBtnClass",
        cancelButtonClass: "cancelBtnClass",
      })
        .then(async () => {
          projectForm.value.type = type;
          projectForm.value.startTime = projectForm.value.dateValue[0];
          projectForm.value.endTime = projectForm.value.dateValue[1];
          let res;
          if (!projectForm.value.projectId) {
            res = await addProjectApi(projectForm.value);
          } else {
            res = await editProjectApi(projectForm.value);
          }
          if (res.code === 200) {
            emit("update:projectAddShow", false);
            emit("refreshList", false);
            ElMessage.success(res.msg);
            projectForm.value = JSON.parse(JSON.stringify(projectFormTemplate));
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {});
    }
  });
};
/**
 * @description: 处理销售类目选择
 * @param {Number} value 当前值
 */
const handleSaleCategory = (value) => {
  saleCategoryList.value.forEach((item) => {
    if (item.value === value) {
      saleForm.value.saleCategoryName = item.label;
    }
  });
  const obj = {
    brand: "",
    saleName: "",
    materialId: null,
    materialUnit: null,
    materialUnitName: "",
    platformName: "",
    technologyParameter: "",
    quantity: null,
  };
  saleForm.value = { ...saleForm.value, ...obj };
};

/**
 * @description: 处理设备名称选择
 * @param {Number} value 当前值
 */
const handleDevice = (value) => {
  if (value) {
    deviceList.value.forEach((item) => {
      if (value === item.materialId) {
        saleForm.value.saleName = item.saleName;
        saleForm.value.materialUnit = item.materialUnit;
        saleForm.value.materialUnitName = item.materialUnitName;
        saleForm.value.technologyParameter = item.technologyParameter;
      }
    });
  } else {
    saleForm.value.saleName = "";
    saleForm.value.materialUnit = "";
    saleForm.value.materialUnitName = "";
    saleForm.value.technologyParameter = "";
  }
};

const showImg = (img) => {
  let imgArr = [];
  imgArr.push(img);
  return imgArr;
};

/**
 * @description: 处理审核状态相关按钮
 * @param {String} type  类型
 * @param {String} title 标题
 */
const handleCheckBtn = (projectFormRef, type, title) => {
  ElMessageBox.confirm(`确定${title}以上数据吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "confirmBtnClass",
    cancelButtonClass: "cancelBtnClass",
  })
    .then(async () => {
      const obj = {
        checkStatus: type,
        projectId: projectForm.value.projectId,
      };
      const res = await checkProjectApi(obj);
      if (res.code === 200) {
        emit("updateFollowAddShow", false);
        emit("update:projectAddShow", false);
        emit("refreshList", false);
        ElMessage.success(res.msg);
        projectForm.value = JSON.parse(JSON.stringify(projectFormTemplate));
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch(() => {});
};

/**
 * @description: 返回
 */
const handleBack = () => {
  if (props.pageType === "detail" || props.pageType === "check") {
    emit("updateFollowAddShow", false);
    emit("update:projectAddShow", false);
    projectForm.value = JSON.parse(JSON.stringify(projectFormTemplate));
  } else {
    ElMessageBox.confirm("确定返回上一级吗?以上数据未保存将会丢失!", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      confirmButtonClass: "confirmBtnClass",
      cancelButtonClass: "cancelBtnClass",
    })
      .then(async () => {
        emit("update:projectAddShow", false);
        projectForm.value = JSON.parse(JSON.stringify(projectFormTemplate));
      })
      .catch(() => {});
  }
};

/**
 * @description: 新增、编辑联系人
 * @param {Object} contactFormRef 联系人表单引用
 */
const handleContactAdd = async (contactFormRef) => {
  if (!contactFormRef) return;
  await contactFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (operateType.value === "edit") {
        projectForm.value.projectPracticeInfoRespVos[tableIndex.value] =
          JSON.parse(JSON.stringify(contactForm.value));
      } else {
        projectForm.value.projectPracticeInfoRespVos.push(
          JSON.parse(JSON.stringify({ ...contactForm.value }))
        );
      }
      contactForm.value = {
        name: "",
        phone: "",
        practiceId: null,
        projectId: null,
        remarks: "",
      };
      //   contactAddShow.value = false;
      contactFormRef.resetFields();
      nextTick(() => {
        contactRefInput.value.focus(); // 聚焦
      });
    } else {
      console.log("error submit!");
    }
  });
  //   operateType.value = "";
};

/**
 * @description: 新增、编辑销售清单
 * @param {Object} saleFormRef 联售清单引用
 */
const handleSaleAdd = async (saleFormRef) => {
  if (!saleFormRef) return;
  await saleFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (operateType.value === "edit") {
        projectForm.value.projectSaleInfoRespVos[tableIndexSec.value] =
          JSON.parse(JSON.stringify(saleForm.value));
      } else {
        projectForm.value.projectSaleInfoRespVos.push(
          JSON.parse(JSON.stringify({ ...saleForm.value }))
        );
      }
      saleForm.value = {
        brand: "",
        saleName: "",
        materialId: null,
        materialUnit: null,
        materialUnitName: "",
        platformName: "",
        technologyParameter: "",
        projectId: null,
        projectSaleId: null,
        quantity: null,
        remarks: "",
        saleCategory: null,
        saleCategoryName: "",
        saleName: "",
      };
      //   contactAddShow.value = false;
      saleFormRef.resetFields();
      nextTick(() => {
        refSelect.value.focus(); // 聚焦
      });
    } else {
      console.log("error submit!");
    }
  });
  //   operateType.value = "";
};

/**
 * @description: 处理联系人操作
 */
const handleContactOperate = () => {
  contactAddShow.value = true;
  operateType.value = "add";
  nextTick(() => {
    contactRefInput.value.focus(); // 聚焦
  });
};

/**
 * @description: 处理销售清单操作
 */
const handleSaleOperate = () => {
  saleAddShow.value = true;
  operateType.value = "add";
  nextTick(() => {
    refSelect.value.focus(); // 聚焦
  });
};

/**
 * @description: 处理采购详情
 */
const handlePurchase = async (row) => {
  dialogVisible.value = true;
  const result = await purchaseDetailApi(row.purchaseApplyId);
  purchaseInfo.value = result;
  purchaseInfo.value.forEach((item) => {
    item.allPrice = (item.purchaseNumber * item.purchasePrice).toFixed(2);
  });
};

/**
 * @description: 联系人返回
 */
const handleProjectBack = () => {
  contactAddShow.value = false;
  nextTick(() => {
    refInput.value.focus(); // 聚焦
  });
};

/**
 * @description: 销售清单返回
 */
const handleSaleBack = () => {
  saleAddShow.value = false;
  nextTick(() => {
    refInput.value.focus(); // 聚焦
  });
};

/**
 * @description: 处理省市区操作
 * @param {String} type 类型
 */
const handleProvince = (type) => {
  switch (type) {
    case "province":
      cityList.value = [];
      areaList.value = [];
      projectForm.value.city = null;
      projectForm.value.area = null;
      getProvinceApi(projectForm.value.province).then((res) => {
        if (res.code === 200) {
          cityList.value = res.data;
        }
      });
      break;
    case "city":
      areaList.value = [];
      projectForm.value.area = null;
      getProvinceApi(projectForm.value.city).then((res) => {
        if (res.code === 200) {
          areaList.value = res.data;
        }
      });
      break;
  }
};

/**
 * @description: 处理销售清单表格操作
 * @param {String} type 操作类型
 * @param {Object} row  当前行数据
 * @param {Number} tabIndex 表格当前索引
 */
const handleOperateSec = (type, row, tabIndex) => {
  if (type === "edit") {
    tableIndexSec.value = tabIndex;
    saleForm.value = JSON.parse(JSON.stringify(row));
    saleAddShow.value = true;
    operateType.value = "edit";
    nextTick(() => {
      refSelect.value.focus(); // 聚焦
    });
  } else {
    projectForm.value.projectSaleInfoRespVos.splice(tabIndex, 1);
  }
};

/**
 * @description: 处理联系人表格操作
 * @param {String} type 操作类型
 * @param {Object} row  当前行数据
 * @param {Number} tabIndex 表格当前索引
 */
const handleOperate = (type, row, tabIndex) => {
  if (type === "edit") {
    tableIndex.value = tabIndex;
    contactForm.value = JSON.parse(JSON.stringify(row));
    contactAddShow.value = true;
    operateType.value = "edit";
    nextTick(() => {
      contactRefInput.value.focus(); // 聚焦
    });
  } else {
    projectForm.value.projectPracticeInfoRespVos.splice(tabIndex, 1);
  }
};

/**
 * @description: 处理详情信息
 * @param {Number} id
 */
const handleDetailInfo = async (id) => {
  try {
    detailInfoShow.value = true;
    const res = await readyProjecDetailApi(id);
    const resStart = await startProjecDetailApi(id);
    startForm.value = resStart;
    projectForm.value = {
      ...res.projectInfoRespVo,
      projectPracticeInfoRespVos: res.projectPracticeInfoRespVos,
      projectSaleInfoRespVos: res.projectSaleInfoRespVos,
      purchaseListRespVos: res.purchaseListRespVos,
    };
    projectForm.value.dateValue = [
      projectForm.value.startTime,
      projectForm.value.endTime,
    ];
    await getProvinceApi(projectForm.value.province).then((res) => {
      if (res.code === 200) {
        cityList.value = res.data;
      }
    });
    await getProvinceApi(projectForm.value.city).then((res) => {
      if (res.code === 200) {
        areaList.value = res.data;
      }
    });
    setTimeout(() => {
      detailInfoShow.value = false;
    }, 500);
  } catch (error) {
    detailInfoShow.value = false;
  }
};

/**
 * @description: 获取字典
 */
async function getDicts() {
  // 客户列表
  await getCustomerAllListApi().then((res) => {
    customerList.value = res;
  });
  // 设备列表
  await getMaterialListApi({}, {}).then((res) => {
    if (res.code === 200) {
      deviceList.value = res.rows;
    }
  });
  // 销售项目类目
  await getDictsApi("erp_sale_category").then((res) => {
    if (res.code === 200) {
      saleCategoryList.value = res.data;
    }
  });

  // 是否签合同
  await getDictsApi("erp_include_contract").then((res) => {
    if (res.code === 200) {
      contractList.value = res.data;
    }
  });
  // 是否中标
  await getDictsApi("erp_successful_bidder").then((res) => {
    if (res.code === 200) {
      successfulList.value = res.data;
    }
  });

  // 项目种类
  await getDictsApi("erp_project_category").then((res) => {
    if (res.code === 200) {
      kindList.value = res.data;
    }
  });
  // 项目状态
  await getDictsApi("erp_project_status").then((res) => {
    if (res.code === 200) {
      statusList.value = res.data;
    }
  });
  // 项目类型
  await getDictsApi("erp_project_type").then((res) => {
    if (res.code === 200) {
      typeList.value = res.data;
    }
  });
  // 用户
  await getUserListApi().then((res) => {
    if (res) {
      userList.value = res;
    }
  });
  // 省
  await getProvinceApi(1).then((res) => {
    if (res.code === 200) {
      provinceList.value = res.data;
    }
  });
}

onMounted(() => {
  getDicts();
  nextTick(() => {
    refInput.value.focus(); // 聚焦
  });
});

defineExpose({
  handleDetailInfo,
});
</script>
<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
  background-color: #f8faff;
}
.projectAdd {
  padding: 20px 20px 0 20px;
  width: 100%;
  height: 100%;
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 268px !important;
    height: 34px !important;
  }
  .project-info {
    padding: 20px 20px 5px 20px;
    background-color: #f0f0f0;
    margin: 10px 0;
  }
  .contact-info {
    padding-top: 20px;
  }
  :deep(.el-table) {
    th.el-table__cell {
      background: #f8f8f8 !important;
    }
  }
}
</style>
